import { useAppSelector } from '@/redux/store';
import { CaretDownOutlined, UserOutlined } from '@ant-design/icons';
import type { MenuProps, MenuRef } from 'antd';
import { Avatar, Dropdown, Menu } from 'antd';
import { useCallback, useRef } from 'react';
import { useNavigate } from 'react-router-dom';

import OStyle from './LoginUserInfo.less';

const items = [
  {
    label: '退出',
    key: '3',
  },
];

export default function LoginUserInfo() {
  const loginUser = useAppSelector((state) => state.loginUser);
  const navigator = useNavigate();

  const menuRef = useRef<MenuRef>(null);

  const dropdownRender = useCallback(() => {
    const onClick: MenuProps['onClick'] = ({ key }) => {
      switch (key) {
        case '3':
          navigator('/login');
          break;
        default:
          navigator('/login');
          break;
      }
    };
    return <Menu ref={menuRef} items={items} onClick={onClick} />;
  }, []);

  return (
    <>
      <Dropdown
        dropdownRender={dropdownRender}
        overlayClassName={OStyle.login_user_menu}
        onOpenChange={(visable) => {
          if (visable) {
            setTimeout(() => {
              if (menuRef.current?.menu) {
                menuRef.current.menu.list.style.transform = 'translateY(12px)';
              }
            }, 10);
          }
        }}
      >
        <div className={OStyle.se_navbar_user}>
          <Avatar shape="square" size="small" icon={loginUser.logo ? <img src={loginUser.logo} /> : <UserOutlined />} />
          &nbsp;
          <span className="user-name" style={{ marginLeft: 8, marginRight: 4 }}>
            {loginUser.nickName}
          </span>
          <CaretDownOutlined
            className={OStyle.down_icon}
            style={{
              color: 'rgba(255,255,255,.59)',
              marginTop: '1px',
              transition: 'all .3s ease-in-out',
            }}
          />
        </div>
      </Dropdown>
    </>
  );
}
